<template>
	<div class="match-home">
		<div class="banner-cont">
			<div class="news-banner" style='text-align:center'>
				<div class="swiper-wrapper">
					<div class="banner-item swiper-slide" v-for="item in banners" style="width: 100%;height: 600px;">
						<el-image fit="contain" :src="item.imageUrl" style="width: 100%;height: 100%;"></el-image>
						<!-- <img :src="item.imageUrl" alt=""> -->
					</div>
					<!-- <div class="banner-item swiper-slide" v-for="item in banners">
						<img :src="item.imageUrl" alt="">
					</div> -->
				</div>
			</div>
		</div>
		<div class="block">
			<cmp-subTitle align="center" :hasIcon="false" title="信息素养竞赛" :shouMore="true"
				@getmore="goPage('/MatchList?type=1')"></cmp-subTitle>
			<div class="block-cont">
				<div class="match-list" v-if="infoList && infoList.length != 0">
					<div class="match-item" v-for="item in infoList">
						<div class="match-item-title">{{item.title}}</div>
						<div class="item-time">开始时间：{{item.startTime}}</div>
						<div class="item-time">结束时间：{{item.endTime}}</div>
						<div class="item-intro" v-html="item.content"></div>
						<el-button :type="item.overdue ? 'info': 'primary'" @click="application(item)"
							:disabled="item.overdue">立即报名</el-button>
					</div>
				</div>
				<div class="no-data" v-else>
					<el-empty description="暂无信息素养竞赛信息"></el-empty>
				</div>
			</div>
		</div>
		<div class="block">
			<cmp-subTitle align="center" :hasIcon="false" title="馆员能力提升" :shouMore="true"
				@getmore="goPage('/MatchList?type=2')"></cmp-subTitle>
			<div class="block-cont">
				<div class="match-list" v-if="abilityRace && abilityRace.length != 0">
					<div class="match-item" v-for="item in abilityRace">
						<div class="match-item-title">{{item.title}}</div>
						<div class="item-time">开始时间：{{item.startTime}}</div>
						<div class="item-time">结束时间：{{item.endTime}}</div>
						<div class="item-intro" v-html="item.content"></div>
						<el-button :type="item.overdue ? 'info': 'primary'" @click="application(item)"
							:disabled="item.overdue">立即报名</el-button>
					</div>
				</div>
				<div class="no-data" v-else>
					<el-empty description="暂无馆员能力提升竞赛信息"></el-empty>
				</div>
			</div>
		</div>
		<div class="block">
			<cmp-subTitle align="center" :hasIcon="false" title="阅读推广竞赛" :shouMore="true"
				@getmore="goPage('/MatchList?type=3')"></cmp-subTitle>
			<!-- <div class="block-title title-center">
				<i class="title-icon"></i>
				<div class="title-name white-color">阅 / 读 / 推 / 广 / 竞 / 赛</div>
				<i class="title-icon"></i>
				<div class="getMore" @click="goPage('/MatchList', 1111)">更多</div>
			</div> -->
			<div class="block-cont">
				<div class="match-list" v-if="readingRace && readingRace.length != 0">
					<div class="match-item" v-for="item in readingRace">
						<div class="match-item-title">{{item.title}}</div>
						<div class="item-time">开始时间：{{item.startTime}}</div>
						<div class="item-time">结束时间：{{item.endTime}}</div>
						<div class="item-intro" v-html="item.content"></div>
						<el-button :type="item.overdue ? 'info': 'primary'" @click="application(item)"
							:disabled="item.overdue">立即报名</el-button>
					</div>
				</div>
				<div class="no-data" v-else>
					<el-empty description="暂无阅读推广竞赛信息"></el-empty>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getCompetitionListApi,
		playCompetitionApi
	} from '@/api/Match'
	import {
		getBannerApi
	} from '@/api/Lesson'
	import cmpSubTitle from '@/components/cmp-subTitle'
	import Swiper from 'swiper'
	export default {
		data() {
			return {
				bannerSwiper: null,
				banners: [],
				infoList: [],
				abilityRace: [],
				readingRace: []
			}
		},
		created() {
			this.getBanner()
			this.getInfoList()
			this.getAbility()
			this.getReading()
		},
		methods: {
			getBanner() {
				getBannerApi({
					menuid: 2496,
				}).then(res => {
					this.banners = res.data
					this.$nextTick(() => {
						this.bannerSwiper = new Swiper(".news-banner", {
							autoHeight: true,
							watchSlidesProgress: true,
							slidesPerView: 'auto',
							loop: true,
							autoplay: true,
						});
					})
				})
			},
			getInfoList() {
				getCompetitionListApi({
					competitionModule: 1,
					pageNum: 1,
					pageSize: 6
				}).then(res => {
					let list = res.rows
					for (let i = 0; i < list.length; i++) {
						list[i].overdue = this.judgeOver(list[i])
					}
					this.infoList = list

				})
			},
			judgeOver(item) {
				let end = Number(new Date(item.startTime))
				let now = Number(new Date()),
					str = false
				if (now >= end) {
					str = true
				}
				return str
			},
			getAbility() {
				getCompetitionListApi({
					competitionModule: 2,
					pageNum: 1,
					pageSize: 6
				}).then(res => {
					let list = res.rows
					for (let i = 0; i < list.length; i++) {
						list[i].overdue = this.judgeOver(list[i])
					}
					this.abilityRace = list
				})
			},
			getReading() {
				getCompetitionListApi({
					competitionModule: 3,
					pageNum: 1,
					pageSize: 6
				}).then(res => {
					let list = res.rows
					for (let i = 0; i < list.length; i++) {
						list[i].overdue = this.judgeOver(list[i])
					}
					this.readingRace = list
				})
			},
			goPage(path, id) {
				this.$router.push({
					path: path,
					query: {
						id: id
					}
				})
			},
			application(item) {
				if (!this.token) {
					this.$confirm('您还未登陆，没有权限，请登陆后重试！', '提示', {
						confirmButtonText: '去登陆',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.$router.push('/Login')
					}).catch(() => {});
				}
				this.selectItem = item
				this.$confirm('确定参加' + item.title + '吗？', '提示', {
					confirmButtonText: '参加',
					cancelButtonText: '取消',
				}).then(() => {
					setTimeout(() => {
						this.applicationFn()
					}, 500)

				}).catch(() => {

				});
			},
			applicationFn() {
				playCompetitionApi({
					competitionID: this.selectItem.recId
				}).then(res => {
					if (res.code == 200) {
						this.$message({
							type: 'success',
							message: res.msg
						})
					}
				})
			},
		},
		components: {
			cmpSubTitle
		}
	}
</script>

<style lang="less">
	@contWidth: 1280px;

	.match-home {
		// background-image: url(../assets/img/index_img_newsbg2.png), url(../assets/img/index_img_newsBg1.png), url(../assets/img/logo_img_bg.png);
		// background-repeat: no-repeat, no-repeat, repeat-y;
		// background-size: 4.8rem 6.79rem, 6.99rem 6.74rem, 100%;
		// background-position: left 27.16rem, right 16.7rem, left top;



		.banner {
			width: @contWidth;
			height: 100%;
			margin: 0 auto;
			position: relative;
		}

		.news-banner {
			overflow: hidden;
			max-width: 1600px;
			margin: 0 auto;
			position: relative;
		}

		// .banner-item {
		// 	position: absolute;
		// 	top: 0;
		// 	left: 0;
		// 	z-index: 99;
		// 	width: 100%;
		// 	height: 100%;
		// 	display: flex;
		// 	justify-content: space-between;
		// }

		.block {
			width: @contWidth;
			margin: 30px auto;
			background-color: #f5f5f5;
			padding: 20px;
		}

		.block-title {
			padding: 34px 0 50px;
			display: flex;
			align-items: center;
			position: relative;
			width: 100%;
		}

		.title-center {
			justify-content: center;
		}

		.title-icon {
			width: 30px;
			height: 30px;
			margin: 0 13px;
			background: url(../assets/img/home_title_icon.png)no-repeat;
			background-size: 100% 100%;
		}

		.title-name {
			font-size: 20px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 500;
			color: #000000;
			line-height: 27px;
		}

		.getMore {
			position: absolute;
			top: 50%;
			right: 20px;
			transform: translateY(-50%);
			cursor: pointer;
			font-size: 14px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #858585;
		}

		.block-cont {
			display: flex;
			flex-wrap: wrap;
		}

		.match-list {
			width: @contWidth;
			margin: 0 auto;
			padding: 46px 68px;
			background-color: #fff;
			display: flex;
			flex-wrap: wrap;
		}

		.match-item {
			width: 354px;
			// height: 248px;
			border-radius: 13px;
			background: #F4F8FF;
			margin-bottom: 37px;
			padding: 20px;
			transition: all 0.5s;

			.match-item-title {
				font-size: 27px;
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: 500;
				color: #333333;
				margin-bottom: 10px;
			}

			.item-time {
				margin-bottom: 10px;
				font-size: 13px;
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: 400;
				color: #666666;
			}

			.item-intro {
				height: 60px;
				margin-bottom: 20px;
				font-size: 13px;
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: 400;
				color: #666666;
				line-height: 17px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;

				p {
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					overflow: hidden;
				}
			}

			.item-btn {
				width: 103px;
				height: 39px;
				background: #0A8CFF;
				border-radius: 5px;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 17px;
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: 500;
				color: #FFFFFF;
				cursor: pointer;
			}

			.not-click {}

			&:not(:nth-of-type(3n)) {
				margin-right: 20px;
			}

			&:hover {
				background: #F9F9F9 linear-gradient(180deg, #4162FF 0%, #35CCFF 100%);

				.match-item-title {
					color: #fff;
				}

				.item-time {
					color: #fff;
				}

				.item-intro {
					color: #fff;
				}

				.item-btn {
					background: #FE7C3E;
				}
			}


		}

		.no-data {
			width: 100%;
			display: flex;
			justify-content: center;
		}
	}
</style>